<template>
    <view class="content">
        <view class="list">
            <view class="item">
                <input type="text" placeholder="请输入手机号" v-model="phone" :style="{ borderColor: phoneError ? 'red' : '#ccc' }">
                <view v-if="phoneError" class="error-message">{{ phoneErrorMessage }}</view>
            </view>
            <view class="item">
                <input type="password" placeholder="请输入密码" v-model="password" :style="{ borderColor: passwordError ? 'red' : '#ccc' }">
                <view v-if="passwordError" class="error-message">{{ passwordErrorMessage }}</view>
            </view>
            <view class="item">
                <input type="password" placeholder="确认密码" v-model="doupassword" :style="{ borderColor: confirmPasswordError ? 'red' : '#ccc' }">
                <view v-if="confirmPasswordError" class="error-message">{{ confirmPasswordErrorMessage }}</view>
            </view>
        </view>
        <view>
            <button type="primary" @click="regiter" :style="{ transform: 'scale(1)', transition: 'all 0.3s ease' }"
                @mouseenter="scaleButton(1.1)" @mouseleave="scaleButton(1)">注册</button>
        </view>
        <view @click="login1()" style="margin-top:20px">
            <button :style="{ transform: 'scale(1)', transition: 'all 0.3s ease' }"
                @mouseenter="scaleButton(1.1)" @mouseleave="scaleButton(1)">已有账号去登录</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            password: '',
            doupassword: '',
            users: [],
            newUser: null,
            phoneError: false,
            phoneErrorMessage: '',
            passwordError: false,
            passwordErrorMessage: '',
            confirmPasswordError: false,
            confirmPasswordErrorMessage: ''
        };
    },
    onLoad() {
        this.fetch();
    },
    methods: {
        // 获取用户信息
        fetch() {
            uni.request({
                url: `http://localhost:3000/users`,
                success: (res) => {
                    this.users = res.data;
                }
            });
        },
        regiter() {
            this.phoneError = false;
            this.passwordError = false;
            this.confirmPasswordError = false;

            if (!this.phone) {
                this.phoneError = true;
                this.phoneErrorMessage = '手机号不能为空';
                return;
            } else if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                this.phoneError = true;
                this.phoneErrorMessage = '请输入正确格式的手机号';
                return;
            }

            if (!this.password) {
                this.passwordError = true;
                this.passwordErrorMessage = '密码不能为空';
                return;
            } else if (this.password.length < 6) {
                this.passwordError = true;
                this.passwordErrorMessage = '密码长度需大于6位';
                return;
            }

            if (this.password !== this.doupassword) {
                this.confirmPasswordError = true;
                this.confirmPasswordErrorMessage = '两次输入的密码不一致';
                return;
            }

            if (this.users.some(user => user.phone === this.phone)) {
                this.phoneError = true;
                this.phoneErrorMessage = '该手机号已注册';
                return;
            }

            uni.request({
                url: 'http://localhost:3000/users',
                method: 'POST',
                data: {
                    phone: this.phone,
                    password: this.password
                },
                success: (res) => {
                    if (res.statusCode === 201) {
                        this.users.push(res.data);
                        uni.showToast({
                            title: '注册成功',
                            icon: 'success',
                            duration: 1500,
                            success: () => {
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: '/pages/login/login'
                                    });
                                }, 300);
                            }
                        });
                    } else {
                        uni.showToast({
                            title: '注册失败，请稍后重试',
                            icon: 'none'
                        });
                    }
                }
            });
        },
        // 已有账号去登录
        login1() {
            uni.navigateTo({
                url: `/pages/login/login`
            });
        },
        scaleButton(scale) {
            const buttons = document.querySelectorAll('.content button');
            buttons.forEach(button => {
                button.style.transform = `scale(${scale})`;
            });
        }
    }
};
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f4f9;
    padding: 20px;
}

.list {
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.item {
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    transition: border-color 0.3s ease;
}

.item input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
}

.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

.content button {
    width: 100%;
    max-width: 400px;
    height: 50px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.content button:hover {
    background-color: #0056b3;
}
</style>    